<template>
    <div class="messageBox">
        <div class="yanhua">
            <canvas class="yanhua" ref="confettiCanvas"></canvas>
        </div>
        <!-- <div class="onebasicinformationclose" @click="goclose"><i class="el-icon-circle-close"></i></div>
        <div class="alertisshow" v-show="alertisshow">
            <div class="alertbox">
                <img class="alertbox-img" src="@/assets/images/red/alertisshow.png" alt="">
            </div>
            <div class="ischoose">
                <div class="istrue" @click="abandon">
                    <img class="istrue-img" src="@/assets/images/red/alertisshow_abandon.png" alt="">
                </div>
                <div class="isfalse" @click="use">
                    <img class="isfalse-img" src="@/assets/images/red/alertisshow_use.png" alt="">
                </div>
            </div>
        </div> -->
        <div class="messageBoxbg">
            <img v-if="this.$route.query.id == 2" class="messageBoxbg-img" src="@/assets/images/red/red_2.jpg" alt="">
            <img v-if="this.$route.query.id == 1" class="messageBoxbg-img" src="@/assets/images/red/red_2_1.jpg" alt="">
        </div>
        <div class="getmoney" @click="gobasicinformationcompleted">
            <div>
                <img style="width: 196px; height: 64px;" src="@/assets/images/red/btn_47.png" alt="">
            </div>
        </div>
        <div class="listbg">
            <!-- <div class="list" v-if="moneyinf0">
                <div id="boxid">
                    <div id="box1" ref="box1">
                        <span class="item">{{ box1index }}</span>
                    </div>
                </div>
                <div id="boxid">
                    <div id="boxis">
                        <span class="item">.</span>
                    </div>
                </div>
                <div id="boxid">
                    <div id="box2" ref="box2">
                        <span class="item">{{ box2index }}</span>
                    </div>
                </div>

                <div id="boxid">
                    <div id="box3" ref="box3">
                        <span class="item">{{ box3index }}</span>
                    </div>
                </div>
                <div id="boxid">
                    <div>
                        <span>元</span>
                    </div>
                </div>
            </div> -->
            <div id='main'>
                <!--  <div class="itemnum"><span>.</span></div> -->
                <div class="itemnum"><span
                        style=" display: inline-block; width: 10px; height: 10px; border-radius: 50%;  background: #f9583a;"></span>
                </div>
                <div v-for="(val, index) in numberArr" :key="index">
                    <div style="width:55px;height:80px">
                        <div class="numberScrollPar">
                            <div v-for="i in 10" :key="i">
                                <div class="child">{{ i - 1 }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="font-size: 29px; color: #f9583a; position: relative; top: 33px; font-weight: bold;">元</div>
            </div>
        </div>
    </div>
</template>

<script>
import confetti from 'canvas-confetti';
import { redpacket, receiveredpacket, searchpacketrecord, addpacketstep, addburyingpoint } from '@/api/http.js'
export default {

    data() {
        return {
            show: true,
            isshow: false,
            box3index: 0,
            box1index: 0,
            box2index: 0,
            redPacketType: '1',
            redPacketId: '',
            moneyinf0: "",
            // form: [
            //     {
            //         index: 0,
            //         value: 0,
            //     },
            //     {
            //         index: 1,
            //         value: 80,
            //     },
            //     {
            //         index: 2,
            //         value: 160,
            //     },
            //     {
            //         index: 3,
            //         value: 233.99,
            //     },
            //     {
            //         index: 4,
            //         value: 320,
            //     },
            //     {
            //         index: 5,
            //         value: 400,
            //     },
            //     {
            //         index: 6,
            //         value: 480,
            //     },
            //     {
            //         index: 7,
            //         value: 560,
            //     },
            //     {
            //         index: 8,
            //         value: 640,
            //     },
            //     {
            //         index: 9,
            //         value: 720,
            //     },
            //     {
            //         index: 10,
            //         value: 800,
            //     },
            // ],
            alertisshow: false,
            yanhuatimeout: "",
            yanhuatime: '',
            settime: "",
            time: "",
            numberArr: [0, 0, 0]
        }
    },
    mounted() {
        console.log(this.$route)
        ///messageBox?id=2
        let url = encodeURIComponent(this.$route.name + `?id=` + this.$route.query.id + '&path=' + this.$route.query.path)
        addpacketstep(url).then(res => {
            console.log(res)
        })

        if (this.$route.query.id == 2) {
            //完成信息填写
            searchpacketrecord(1).then(res => {
                console.log(res)
                if (res.data.status == -1) {
                    this.getredpacket()
                } else if (res.data.status == 5) {
                    this.moneyinf0 = res.data.randomAmount
                    this.redPacketId = res.data.redPacketId
                    const text = this.moneyinf0;
                    const chars = text.split('');

                    this.numberArr[0] = chars[0]
                    this.numberArr[1] = chars[1]
                    this.numberArr[2] = chars[2]
                    console.log(this.numberArr)
                    const element = document.getElementsByClassName('numberScrollPar');
                    console.log(element.length)
                    for (let i = 0; i < element.length; i++) {
                        const name = 'numberScroll_' + this.numberArr[i];

                        element[i].classList.add(name);
                    }

                } else if (res.data.status == 4) {
                    this.moneyinf0 = res.data.randomAmount
                    this.redPacketId = res.data.redPacketId
                    const text = this.moneyinf0;
                    const chars = text.split('');
                    this.numberArr[0] = chars[0]
                    this.numberArr[1] = chars[1]
                    this.numberArr[2] = chars[2]
                    console.log(this.numberArr)
                    const element = document.getElementsByClassName('numberScrollPar');
                    console.log(element.length)
                    for (let i = 0; i < element.length; i++) {
                        const name = 'numberScroll_' + this.numberArr[i];

                        element[i].classList.add(name);
                    }
                    this.$router.push({
                        path: '/basicinformationcompleted',
                        query: { id: 2, path: 'sce' }
                    })
                } else if (res.data.status == 6) {
                    this.$router.push({
                        path: '/sce',
                        query: { id: 2, path: 'sce' }
                    })
                }
            })
        } else if (this.$route.query.id == 1) {
            console.log(1)
            searchpacketrecord(2).then(res => {
                console.log(res)
                if (res.data.status == -1) {
                    this.getredpacket()
                } else if (res.data.status == 5) {
                    this.moneyinf0 = res.data.randomAmount
                    const text = this.moneyinf0;
                    this.redPacketId = res.data.redPacketId
                    const chars = text.split('');
                    this.numberArr[0] = chars[0]
                    this.numberArr[1] = chars[1]
                    this.numberArr[2] = chars[2]
                    console.log(this.numberArr)
                    const element = document.getElementsByClassName('numberScrollPar');
                    console.log(element.length)
                    for (let i = 0; i < element.length; i++) {
                        const name = 'numberScroll_' + this.numberArr[i];

                        element[i].classList.add(name);
                    }
                } else if (res.data.status == 4) {
                    this.moneyinf0 = res.data.randomAmount
                    const text = this.moneyinf0;
                    this.redPacketId = res.data.redPacketId
                    const chars = text.split('');
                    this.numberArr[0] = chars[0]
                    this.numberArr[1] = chars[1]
                    this.numberArr[2] = chars[2]
                    console.log(this.numberArr)
                    const element = document.getElementsByClassName('numberScrollPar');
                    console.log(element.length)
                    for (let i = 0; i < element.length; i++) {
                        const name = 'numberScroll_' + this.numberArr[i];

                        element[i].classList.add(name);
                    }
                    this.$router.push({
                        path: '/basicinformationcompleted',
                        query: { id: 1, path: 'mini-report' }
                    })
                } else if (res.data.status == 6) {
                    this.$router.push({
                        path: '/mini-report',
                        query: { id: 2, path: 'mini-report' }
                    })
                }
            })
        }
    },

    beforeDestroy() {
        clearInterval(this.time1)
        clearInterval(this.time2)
        clearInterval(this.time3)

        clearTimeout(this.settime)
        clearTimeout(this.yanhuatimeout)
        clearInterval(this.yanhuatime)

    },
    methods: {
        goclose() {
            this.alertisshow = true
        },
        abandon() {
            this.cardType = 3
            if (this.$route.query.id == 1) {
                //写完成第一组筛查
                this.getreceiveredpacket(this.redPacketId, this.cardType)
                // this.$router.push({
                //     path: '/mini-report',
                //     query: { id: 1, path: 'mini-report' }
                // })
            } else if (this.$route.query.id == 2) {
                //完成信息填写
                this.getreceiveredpacket(this.redPacketId, this.cardType)
                // this.$router.push({
                //     path: '/sce',
                //     query: { id: 2, path: 'sce' }
                // })
            }
        },
        use() {
            // this.$router.go(-1)
            this.alertisshow = false
        },
        startConfetti() {
            confetti.create(this.$refs.confettiCanvas, {
                resize: true,
                useWorker: true,
            })({ particleCount: 200, spread: 200 });
        },
        //开心收下
        gobasicinformationcompleted() {
            this.cardType = 1
            if (this.$route.query.id == 1) {
                //写完成第三组筛查
                let obj = { buriedPointName: '第三组题', function: '1', module: '3', redirectPage: '剩余金额信息提醒', section: '5', orgNo: '' }
                addburyingpoint(obj).then(res => {

                    console.log(res)
                })
                this.getreceiveredpacket(this.redPacketId, this.cardType)


                // this.$router.push({
                //     path: '/basicinformationcompleted',
                //     query: { id: 1, path: 'mini-report' }
                // })
            } else if (this.$route.query.id == 2) {
                //完成信息填写
                let obj = { buriedPointName: '完成信息填写2', function: '2', module: '2', redirectPage: '进入筛查题组页', section: '4', orgNo: '' }
                addburyingpoint(obj).then(res => {
                    console.log(res)
                })
                this.getreceiveredpacket(this.redPacketId, this.cardType)
                // this.$router.push({
                //     path: '/basicinformationcompleted',
                //     query: { id: 2, path: 'sce' }
                // })
            }
        },
        //获取金额
        getredpacket() {
            let obj
            if (this.$route.query.id == 2) {
                //完成信息填写
                this.redPacketType = 1
            } else if (this.$route.query.id == 1) {
                //写完成第一组筛查
                this.redPacketType = 2
            }
            redpacket(this.redPacketType).then(res => {
                console.log(res)
                this.moneyinf0 = res.data.randomAmount
                this.redPacketId = res.data.redPacketId
                if (this.moneyinf0) {
                    this.time1 = setInterval(() => {
                        this.box1index = this.box1index + 1
                        if (this.box1index == 10) {
                            this.box1index = 0
                        }
                    }, 120)
                    this.time2 = setInterval(() => {
                        this.box2index = this.box2index + 1
                        if (this.box2index == 10) {
                            this.box2index = 0
                        }
                    }, 140)
                    this.time3 = setInterval(() => {
                        this.box3index = this.box3index + 1
                        if (this.box3index == 10) {
                            this.box3index = 0
                        }
                    }, 160)
                    console.log(this.moneyinf0)
                    const text = this.moneyinf0;
                    const chars = text.split('');
                    this.numberArr[0] = chars[0]
                    this.numberArr[1] = chars[1]
                    this.numberArr[2] = chars[2]
                    console.log(this.numberArr)
                    const element = document.getElementsByClassName('numberScrollPar');
                    console.log(element.length)
                    for (let i = 0; i < element.length; i++) {
                        const name = 'numberScroll_' + this.numberArr[i];

                        element[i].classList.add(name);
                    }
                    this.settime = setTimeout(() => {
                        this.yanhuatime = setInterval(() => {
                            this.startConfetti()
                        }, 400)
                        this.yanhuatimeout = setTimeout(() => {
                            clearInterval(this.yanhuatime)
                        }, 1000)

                    }, 1800)

                }
            })
        },
        //更新金额
        getreceiveredpacket(redPacketId, cardType) {
            receiveredpacket(redPacketId, cardType).then(res => {
                console.log(res)
                if (this.$route.query.id == 1) {
                    this.$router.push({
                        path: '/basicinformationcompleted',
                        query: { id: 1, path: 'mini-report' }
                    })
                } else if (this.$route.query.id == 2) {
                    this.$router.push({
                        path: '/basicinformationcompleted',
                        query: { id: 2, path: 'sce' }
                    })
                }
            })
        }

    },
}
</script>

<style scoped>
.messageBox {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    /* background: palegoldenrod; */
}

.yanhua {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
}

/* .canvasstyle {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
} */

.messageBoxbg {
    width: 100%;
    height: 100%;
    position: absolute;
}

.getmoney {
    width: 100%;
    position: absolute;
    top: 70%;
    text-align: center;
    z-index: 4;
}

.messageBoxbg-img {
    width: 100%;
    height: 100%;
}

.cloosemessageBox {
    position: absolute;
    right: 5px;
    width: 50px;
    height: 80px;
    /* background: #fff; */
    border: 2px solid #fff;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    margin-top: 20px;
}

#boxid {
    width: 40px;
    height: 80px;
    /* background: rgb(217, 146, 146); */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: #f9583a;
    vertical-align: middle;
}

#box {
    width: 40px;
    height: 80px;
    position: relative;
    /* background: #ccc; */
    /* text-align: center; */
    /* vertical-align: middle; */
    /* line-height: 80px;// */
    display: flex;
    flex-direction: column;

    overflow: hidden;
}

span {
    width: 40px;
    height: 80px;
    /* background: #ccc;  */
}

#box1 {
    width: 45px;
    height: 80px;
    position: absolute;
    /* background: #ccc; */
    /* text-align: center; */
    /* vertical-align: middle; */
    /* line-height: 80px; */
    display: flex;
    flex-direction: column;
    transition: .5s;
    /* overflow: hidden; */
}

#boxis {
    width: 45px;
    height: 80px;
    position: relative;
    text-align: center;
    /* background: #ccc; */
    /* vertical-align: middle; */
    /* line-height: 80px; */
    display: flex;
    justify-content: center;
    flex-direction: column;

    /* overflow: hidden; */
}

#box2 {
    width: 45px;
    height: 80px;
    position: absolute;
    /* background: #ccc; */

    /* line-height: 80px; */
    display: flex;
    flex-direction: column;
    transition: .5s;

    /* overflow: hidden; */
}

#box3 {
    width: 45px;
    height: 80px;
    position: absolute;
    /* background: #ccc; */
    /* text-align: center; */
    /* vertical-align: middle; */
    /* line-height: 80px; */
    display: flex;
    flex-direction: column;
    transition: .5s;
    /* overflow: hidden; */
}

span {
    width: 40px;
    height: 80px;
    /* background: rgb(217, 146, 146); */
    /* margin-bottom: 5px; */
}

.list {
    width: 335px;
    display: flex;
    height: 80px;
    position: absolute;
    justify-content: center;
}

.listbg {
    /* width: 375px; */
    width: 100%;
    height: 80px;
    /* text-align: center; */
    display: flex;
    justify-content: center;
    position: absolute;
    top: 30%;
    /* top:45%; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
}

.item {
    font-size: 74px;
    font-weight: bold;
}

.onebasicinformationclose {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 36px;
    width: 45px;
    height: 45px;
    color: #fff;
    text-align: center;
    line-height: 45px;
    z-index: 3;
}

.alertisshow {
    position: absolute;
    margin-top: 60px;
    height: 100%;
    z-index: 99;
}

.alertbox {
    width: 375px;
    height: 434px;
}

.alertbox-img {
    width: 100%;
    height: 100%;
}

.ischoose {
    position: relative;
    top: -135px;
}

.istrue {
    width: 375px;
    height: 43px;
}

.istrue-img {
    width: 100%;
    height: 100%;
}

.isfalse {
    width: 375px;
    height: 57px;
}

.isfalse-img {
    width: 100%;
    height: 100%;
}

.onebasicinformationclose {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 36px;
    width: 45px;
    height: 45px;
    color: #fff;
    text-align: center;
    line-height: 45px;
}

.alertisshow {
    position: absolute;
    margin-top: 60px;
    height: 100%;
    z-index: 99;
}

.alertbox {
    width: 375px;
    height: 434px;
}

.alertbox-img {
    width: 100%;
    height: 100%;
}

.ischoose {
    position: relative;
    top: -135px;
}

.istrue {
    width: 375px;
    height: 43px;
}

.istrue-img {
    width: 100%;
    height: 100%;
}

.isfalse {
    width: 375px;
    height: 57px;
}

.isfalse-img {
    width: 100%;
    height: 100%;
}


#main {
    width: 70%;
    height: 80px;
    z-index: 4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 110px;
    /* background: white; */
    color: #f9583a;
    font-size: 80px;
    overflow: hidden;
    font-weight: bold;
    display: flex;
    justify-content: center;
}

.itemnum {
    position: relative;
    left: 20%;
    top:  -6%;
    /* 
        left: 56px;
        top: -4px;
    */
}

.numberScrollPar {
    width: 100%;
    height: 100%;
}

.child {
    width: 40px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

@keyframes numberScroll1 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-80px);
    }
}

@-webkit-keyframes numberScroll1 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-80px);
    }
}

.numberScroll_1 {
    animation: numberScroll1 0.5s;
    -webkit-animation: numberScroll1 0.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll2 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-160px);
    }
}

@-webkit-keyframes numberScroll2 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-160px);
    }
}

.numberScroll_2 {
    animation: numberScroll2 1s;
    -webkit-animation: numberScroll2 1s;
    animation-fill-mode: both;
}

@keyframes numberScroll3 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-240px);
    }
}

@-webkit-keyframes numberScroll3 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-240px);
    }
}

.numberScroll_3 {
    animation: numberScroll3 1.5s;
    -webkit-animation: numberScroll3 1.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll4 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-320px);
    }
}

@-webkit-keyframes numberScroll4 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-320px);
    }
}

.numberScroll_4 {
    animation: numberScroll4 2s;
    -webkit-animation: numberScroll4 2s;
    animation-fill-mode: both;
}

@keyframes numberScroll5 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-400px);
    }
}

@-webkit-keyframes numberScroll5 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-400px);
    }
}

.numberScroll_5 {
    animation: numberScroll5 2.5s;
    -webkit-animation: numberScroll5 2.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll6 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-480px);
    }
}

@-webkit-keyframes numberScroll6 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-480px);
    }
}

.numberScroll_6 {
    animation: numberScroll6 1.2s;
    -webkit-animation: numberScroll6 1.2s;
    animation-fill-mode: both;
}

@keyframes numberScroll7 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-560px);
    }
}

@-webkit-keyframes numberScroll7 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-560px);
    }
}

.numberScroll_7 {
    animation: numberScroll7 1.4s;
    -webkit-animation: numberScroll7 1.4s;
    animation-fill-mode: both;
}

@keyframes numberScroll8 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-640px);
    }
}

@-webkit-keyframes numberScroll8 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-640px);
    }
}

.numberScroll_8 {
    animation: numberScroll8 1.6s;
    -webkit-animation: numberScroll8 1.6s;
    animation-fill-mode: both;
}

@keyframes numberScroll9 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-720px);
    }
}

@-webkit-keyframes numberScroll9 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-720px);
    }
}

.numberScroll_9 {
    animation: numberScroll9 1.8s;
    -webkit-animation: numberScroll9 1.8s;
    animation-fill-mode: both;
}

@-webkit-keyframes numberScroll0 {
    0% {
        transform: translateY(0px);
    }

    80% {
        transform: translateY(-720px);
    }

    100% {
        transform: translateY(0px);
    }
}

.numberScroll_0 {
    animation: numberScroll0 1.6s;
    -webkit-animation: numberScroll0 1.6s;
    animation-fill-mode: both;
}
</style>